<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为excel文件</Button>
      <Button style="position:absolute; top: 27px; right: 17px;" type="primary" @click="addPickCode">提货码批量生成</Button>
    </Card>
    <Modal v-model="visible" :title="title" :mask-closable="false" @on-ok="okModal" @on-cancel="cancelModal">
      <Row class="row" style="margin-top: 0;">
        <Col span="6" class="title">
        <strong>机器组名：</strong>
        </Col>
        <Col span="18">
        <Select v-model="machineGroupName" placeholder="请选择机器分组" class="form" @on-change="handleMachineGrop">
          <Option v-for="item in machineGroupNameList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <Row class="row">
        <Col span="6" class="title">
        <strong>机器编号：</strong>
        </Col>
        <Col span="18">
        <Select v-model="machineNumber" placeholder="请选择机器编号" class="form">
          <Option v-for="item in machineNumberList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <Row class="row">
        <Col span="6" class="title">
        <strong>提货码数量：</strong>
        </Col>
        <Col span="18">
        <Input v-model="pickCodeCount" placeholder="请输入提货码数量" class="form" />
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import Mock from 'mockjs'
import Tables from '_c/tables'
import {
  deliveryStateValues,
} from '@/mock/data/option-data.js';
import rcRequest from 'rc-request'
import jsCookie from 'js-cookie'

export default {
  name: 'commodity_type_page',
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        { title: '机器组名', key: 'machineGroupName' },
        { title: '机器号', key: 'machineNumber' },
        { title: '提货码', key: 'pickCode' },
        { title: '提货码生成时间', key: 'pickCodeTime' },
        { title: '提货码状态', key: 'pickCodeState' },
        { title: '提货时间', key: 'pickupTime' },
      ],
      machineGroupNameList: [],
      machineNumberList: [],
      tableData: [],
      // 新增/修改机器组名
      title: '提货码批量生成',
      visible: false,
      machineGroupName: '',
      machineNumber: '',
      pickCodeCount: '',
    }
  },
  methods: {
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `提货码-${(new Date()).valueOf()}.csv`
      })
    },

    addPickCode() {
      this.title = '提货码批量生成';
      this.visible = true;
      this.machineGroupName = '';
      this.machineNumber = '';
      this.pickCodeCount = '';
    },

    async okModal() {
      await rcRequest({
        method: 'post',
        url: '/deliverycode/insert_delivery_code_info',
        data: { 
          machine_id: this.machineNumber,
          delivery_code_number: this.pickCodeCount,
        },
      })
      this.$Message.success('生成成功')
      this.getListData()
    },

    cancelModal() {},

    getRandomStr(len) {
      var x = "123456789poiuytrewqasdfghjklmnbvcxzQWERTYUIPLKJHGFDSAZXCVBNM";
      var str = "";
      for (var i = 0; i < len; i++) {
        str += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
      }
      return str;
    },

    // 获取列表数据
    async getListData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/deliverycode/select_delivery_code_list',
        data: {}
      })
      this.tableData = data.map(item => ({
        id: item.id,
        machineGroupName: item.machine_group_name,
        machineNumber: item.machine_number,
        pickCode: item.delivery_code,
        pickCodeTime: item.create_time,
        pickCodeState: deliveryStateValues[item.delivery_code_status],
        pickupTime: item.delivery_code_time,
      }))
    },

    // 获取机器分组列表数据
    async getGroupListData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/machine_group/select_machine_group_list_of_user_id',
        data: {}
      })
      this.machineGroupNameList = data.map(item => ({
        value: item.id,
        label: item.name,
      }))
    },

    // 根据机器分组id获取机器列表
    async getMachineListData(machine_group_id) {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/machine/select_machine_list_of_machine_group_id',
        data: { machine_group_id }
      })
      this.machineNumberList = data.map(item => ({
        value: item.id,
        label: item.number,
      }))
    },

    // 更改机器分组
    handleMachineGrop(value) {
      this.machineNumber = '';
      this.getMachineListData(value);
    },
  },
  mounted() {
    this.getListData()
    this.getGroupListData()
  }
}
</script>

<style scoped>
.row {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.title {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

.form {
  width: 300px;
}
</style>
